{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
}}

<SyncHeader @title="Secrets Sync" />

<div class="tabs-container box is-bottomless is-marginless is-paddingless">
  <nav class="tabs" aria-label="destination tabs">
    <ul>
      <li><LinkTo @route="secrets.overview" data-test-tab="Overview">Overview</LinkTo></li>
      <li><LinkTo @route="secrets.destinations" data-test-tab="Destinations">Destinations</LinkTo></li>
    </ul>
  </nav>
</div>

<Toolbar>
  <ToolbarFilters>
    <SearchSelect
      @options={{this.destinationTypes}}
      @objectKeys={{array "id" "name"}}
      @passObject={{true}}
      @selectLimit={{1}}
      @disallowNewItems={{true}}
      @placeholder="Filter by type"
      @ariaLabel="Filter by type"
      @inputValue={{if this.typeFilterName (array this.typeFilterName)}}
      @onChange={{fn this.onFilterChange "type"}}
      class="is-marginless"
      data-test-filter="type"
    />
    <div class="has-left-margin-s">
      <FilterInput
        @id="name-filter"
        aria-label="Filter by name"
        placeholder="Filter by name"
        @value={{@nameFilter}}
        data-test-filter="name"
        @onInput={{fn this.onFilterChange "name"}}
      />
    </div>
  </ToolbarFilters>
  <ToolbarActions>
    <ToolbarLink @route="secrets.destinations.create" @type="add" data-test-create-destination>
      Create new destination
    </ToolbarLink>
  </ToolbarActions>
</Toolbar>

{{#if @destinations.meta.filteredTotal}}
  <div class="has-bottom-margin-s">
    {{#each @destinations as |destination index|}}
      <ListItem
        @linkPrefix={{this.mountPoint}}
        @linkParams={{array "secrets.destinations.destination.secrets" destination.type destination.name}}
        as |Item|
      >
        <Item.content>
          <div>
            <Icon @name={{destination.icon}} data-test-destination-icon={{index}} />
            <span data-test-destination-name={{index}}>
              {{destination.name}}
            </span>
          </div>
          <code class="has-text-grey is-size-8" data-test-destination-type={{index}}>
            {{destination.type_display_name}}
          </code>
        </Item.content>

        <Item.menu>
          <Hds::Dropdown @isInline={{true}} @listPosition="bottom-right" as |dd|>
            <dd.ToggleIcon
              @icon="more-horizontal"
              @text="Destinations popup menu"
              @hasChevron={{false}}
              data-test-popup-menu-trigger
            />
            <dd.Interactive
              data-test-popup-menu="details"
              @route="secrets.destinations.destination.details"
              @models={{array destination.type destination.name}}
              @disabled={{not (has-capability @capabilities "read" pathKey="syncDestination" params=destination)}}
            >
              Details
            </dd.Interactive>
            {{#if (has-capability @capabilities "update" pathKey="syncDestination" params=destination)}}
              <dd.Interactive
                data-test-popup-menu="edit"
                @route="secrets.destinations.destination.edit"
                @models={{array destination.type destination.name}}
              >
                Edit
              </dd.Interactive>
            {{/if}}
            {{#if (has-capability @capabilities "delete" pathKey="syncDestination" params=destination)}}
              <dd.Interactive
                data-test-popup-menu="delete"
                @color="critical"
                {{on "click" (fn (mut this.destinationToDelete) destination)}}
              >
                Delete
              </dd.Interactive>
            {{/if}}
          </Hds::Dropdown>
        </Item.menu>
      </ListItem>
    {{/each}}
    <Hds::Pagination::Numbered
      @currentPage={{@destinations.meta.currentPage}}
      @currentPageSize={{@destinations.meta.pageSize}}
      @route="secrets.destinations"
      @showSizeSelector={{false}}
      @totalItems={{@destinations.meta.filteredTotal}}
      @queryFunction={{this.paginationQueryParams}}
      data-test-pagination
    />
  </div>
{{else}}
  <EmptyState @title={{this.noResultsMessage}} />
{{/if}}

{{#if this.destinationToDelete}}
  <ConfirmModal
    @color="critical"
    @confirmMessage="The destination will be permanently deleted and all the secrets will be unsynced. This cannot be undone."
    @onClose={{fn (mut this.destinationToDelete) null}}
    @onConfirm={{fn this.onDelete this.destinationToDelete}}
  />
{{/if}}